<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 视口标签 -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>移动端</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .study1 {
        width: 300px;
        height: 300px;
        background-color: aqua;
      }

      /* img:nth-child(2) {
        width: 50px;
        height: 50px;
      } */

      .study3 {
        width: 500px;
        height: 500px;
        border: 2px solid red;
        background: url(../image/dog.jpg) no-repeat;
        /* background-size: 背景图片的宽度 背景图片的高度; */
        /*1. 只写一个参数 肯定是宽度 高度省略了会等比例缩放 */
        /* background-size: 500px; */
        /* 2.里面的参数可以跟 % 相对于父盒子来说的 */
        /* background-size: 50%; */
        /* background-size: cover; */
        background-size: contain;
      }

      .study4 {
        width: 50px;
        height: 50px;
        border: 1px solid red;
        background: url(./images/apple100.jpg) no-repeat;
        background-size: 50px 50px;
      }

      .study5 {
        /* css3中加上这句话 padding 和 border 不会再撑开盒子了 */
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 10px solid red;
        padding: 10px;
      }

      a {
        -webkit-tap-highlight-color: transparent;
      }
      /* input {
        -webkit-appearance: none;
      } */
    </style>
  </head>
  <body>
    <!-- 雷电将军 -->

    <!-- 
      1.物理像素 就是我们说的分辨率 iphone8的物理像素是 750
      2.在 iphone8 里面 1px 开发像素 = 2 个物理像素
     -->
    <!-- <div class="study1"></div> -->

    <!-- 二倍图 -->
    <!-- 模糊的 -->
    <!-- <img src="./images/apple50(1).jpg" alt="" /> -->
    <!-- 采取二倍图 -->
    <!-- <img src="./images/apple100.jpg" alt="" /> -->

    <!-- 背景缩放 background-size -->
    <!-- 
      单位： 长度 | 百分比 | cover | contain;
      cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。等比例拉伸
      contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域  其高度和宽度等比例拉伸
      当宽度或高度铺满div盒子就不在进行拉伸了 可能有部分空白部分
     -->
    <!-- <div class="study3"></div> -->

    <!-- <div class="study4"></div> -->

    <!-- <div class="study5"></div> -->

    <a href="#">雷电将军</a>
    <input type="button" value="按钮" />
  </body>
</html>
